<template>
    <div class="box-right clearficx">
        <div class="nav-right-top">
            <div>
                <div class="clearficx">
                    <span style="color:#111;font-size:24px;float: left;">{{trainingStore.ClassList.statistics?.planName}}</span><span style="float: right;margin-left:50px" @click="back">返回</span>
                </div>
                <div style="margin-top: 28px;" class="clearficx">
                    <img :src="trainingStore.ClassList.statistics?.creatorAvatar" style="float: left; width: 28px; height:28px; border-radius: 50%;"
                        alt="">
                    <span style="float: left;margin-top: 6px; margin-left: 6px;">{{trainingStore.ClassList.statistics?.creatorName}}</span>
                    <span style="float: left;margin-top: 6px; margin-left: 12px; color: #7d8090;">创建于{{time}}</span>
                </div>
            </div>
        </div>
        <div class="right-box" v-if="trainingStore.ClassList.content?.length>0?true:false">
            <div class="table_paging">
                <table style="width: 100%; min-height: 200px;"  v-loading="loading">
                    <tr class="tr-tb" v-for="(item,index) in trainingStore.ClassList.content" :key="index">
                        <td class="first-td">
                            <div class="cell">
                                <div class="img-box"><img :src="item.cover" alt=""></div>
                                <div class="right_info">
                                    <div class="ellipsis">{{item.contentName}}</div>
                                    <div style="font-size: 14px; margin-top: 20px; color: rgb(125, 128, 144);">
                                        已练习{{item.weekTrainedCount}}次{{Math.ceil(item.weekTrainedDuration/1000/60)}}分钟
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="first-td isright">
                            <div class="cell cell1">
                                <div style="padding-right: 6px; ">
                                    <a class="text-start" :href="item.url" target="_blank">
                                        开始练习
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
                <el-pagination v-model:currentPage="currentPage1" :page-size="pageSize" small
                    layout=",->, prev, pager, next" :total="trainingStore.Roomlist.totalElements"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    v-show="trainingStore.Roomlist.totalElements>10" />
            </div>
        </div>

        <div class="none-tip" v-else>
            <img src="https://rs.dance365.com/img/no_content@3x.0fd78ad2.png" alt="">
        </div>
    </div>

</template>

<script setup lang="ts">
import {
    Search,
    SuccessFilled,
    Clock, Star
} from "@element-plus/icons-vue";
import { ref, onMounted } from 'vue'
import useTrainingStore from '../../../stores/training'
import router from '../../../router/index'
import { useRoute } from 'vue-router'
import moment from 'moment'
import { slice } from "lodash";
let route = useRoute()
const trainingStore = useTrainingStore()
const currentPage1 = ref(5)
let href = ref()
// 总条数
let pageSize = ref(20)
let pageNum = ref(1)
let type = ref('system')
let time = ref()
let result = ref([])
// isloadng
let loading = ref(false)
onMounted(async () => {
    loading.value = true
    console.log(route.query.id);
    await trainingStore.getClassList(pageSize.value, pageNum.value - 1, route.query.id)
    time.value = moment(trainingStore.ClassList.statistics?.createTime).format('YYYY-MM-DD')
    loading.value = false
})

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage1.value = val

}
const back = ()=>{
    router.push('/training')
}
const toLink = ()=>{}
</script>

<style scoped>
.clearficx::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


.clearficx {
    *zoom: 1;
}

.none-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 600px;
}

.box-right {
    margin: 10px 5px 0 0;
    float: right;
    width: 980px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.table_paging {
    margin-bottom: 20px;
    min-height: 700px;
    padding: 0 30px 10px;
    margin-top: 10px;
}


.tr-tb {
    font-size: 12px;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
    transition: all .6s;
}

.tr-tb:hover {
    background: #ebeef5;
}

.first-td {
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    padding: 8px 0;
}

.cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    display: flex;
    color: #111;
    padding: 10px 10px;
}

.cell1 {
    text-align: center;
    justify-content: flex-end;
}

.img-box {
    cursor: pointer;
    position: relative;
    width: 169px;
    height: 101px;

}

.img-box img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.right_info {
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    padding-left: 17px;
    font-size: 16px;
    color: #111;
}

.ellipsis {
    padding-right: 20px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    color: #111;
    font-weight: 700;
}


.operator_btn {
    margin-left: 18px;
    cursor: pointer;
}

.isright {
    text-align: right;
}

.active-right {
    background-color: #f93684;
    color: #fff;
}

.active-btn {
    color: #f93684;
}

/deep/ .el-loading-spinner .path {
    stroke: #f93684
}

/deep/ .el-loading-text {
    color: #f93684;
}

.box-right {
    margin: 10px 5px 0 0;
    float: right;
    width: 980px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.nav-right-top {
    background-color: #FFFFFF;
    border-radius: 5px;
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    padding: 26px 30px;
    box-sizing: border-box;
}

.false {
    float: left;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 9px 12px;
    margin-right: 24px;
    margin-bottom: 10px;
}

.right-box {
    height: 600px;
    margin-top: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 0 30px 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.text-start{
    cursor: pointer;
    width: 96px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: #f73687;
    border-radius: 4px;
    display: block;
    opacity: 0;
}
.tr-tb:hover .text-start {
    opacity: 1;
}

.training-btn {
    width: 84px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #f93684;
    border-radius: 16px;
    cursor: pointer;
}

.active-right {
    background-color: #f93684;
    color: #fff;
}
</style>